<template>
  <view class="page">
    <view class="page-ctx">
      <view class="box-item box-products">
        <view class="products-wrap">
          <view class="products-title">商品详情</view>
          <view class="product-list">
            <view
              class="product-item flex"
              v-for="(item, index) in products"
              :key="index">
              <view class="poster-box" @click="toProduct(item)">
                <image :src="item.image" mode="aspectFill"></image>
              </view>
              <view class="info">
                <view class="title-box" @click="toProduct(item)">
                  <view class="title ellipsis-2">
                    {{ item.title }}
                  </view>
                </view>

                <view class="desc-box">
                  <view class="desc ellipsis-1">
                    {{ item.keyVals }}
                  </view>
                </view>
                <view class="price-info flex-between">
                  <view class="price">{{ item.priceSale || 0 }}积分</view>
                  <view class="num-box">
                    <text class="num">x {{ item.num }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="box-item box-form">
        <!-- <view class="title">
					商品评价
				</view>
				<view class="rate-box flex">
					<view class="reviews-star">
						<view class="star-list flex">
							<view class="star-item" v-for="(starItem,starIndex) in starItems" :key="starIndex"
								@click="changeStar(starItem, starIndex)"> -->
        <!-- <image v-if="starItem.value == 0" src="@/static/review/star0.png" mode=""></image> -->
        <!-- <image v-if="starItem.value == 1" src="@/static/review/star1.png" mode=""></image> -->
        <!-- 				<u-icon v-if="starItem.value == 0" name="star-fill" color="#DDDDDD" size="20"></u-icon>
								<u-icon v-if="starItem.value == 1" name="star-fill" color="#CB0011" size="20"></u-icon>
							</view>
						</view>
					</view>
					<view class="star-title">
						{{starTitle}}
					</view>
				</view> -->
        <view class="textarea-box">
          <!-- <textarea v-model="content"  maxlength="-1" value="" placeholder="写出您的评价，可以帮助更多小伙伴哦~"
						placeholder-class="textarea-p" /> -->
          <u--textarea
            height="104"
            v-model="params.content"
            maxlength="100"
            placeholder="写出您的评价，可以帮助更多小伙伴哦~"
            count
            placeholder-class="textarea-p"></u--textarea>
        </view>
        <view class="upload-wrap flex">
          <view class="upload-list">
            <view
              class="upload-item"
              v-for="(item, index) in upload_pic_list"
              :key="index"
              @click="doPreview(item)">
              <view class="remove-box" @click.stop="doRemove(item, index)">
                <image src="@/static/review/remove.png" mode=""></image>
              </view>
              <view class="preview-box clip-item">
                <image :src="item" mode=""></image>
              </view>
            </view>

            <view
              class="upload-box column-flex-center"
              v-if="upload_pic_list.length < 6"
              @click="doUpload()">
              <image
                src="@/static/image/upload.png"
                mode="aspectFit"
                class="up"></image>
              <!-- 		<view class="tip">
								（最多6张）
							</view> -->
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="page-foot">
      <view class="safe-fixed-bottom">
        <view class="btns flex-between">
          <button class="btn flex-center" @click="doSubmit()">发表评价</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import util from "@/plugin/util.js";
export default {
  components: {},
  data() {
    return {
      orderId: "",
      inventoryId: "",
      products: [],

      params: {
        id: "", //订单id
        inventoryId: "", //商品规格
        star: "",
        star1: "",
        star2: "",
        uploadedfile1: "",
        content: "",
      },

      starValue: 5,
      starTitle: "非常好",
      starMap: {
        1: "非常差",
        2: "很差",
        3: "一般",
        4: "很好",
        5: "非常好",
      },
      starItems: [
        {
          value: 1,
        },
        {
          value: 1,
        },
        {
          value: 1,
        },
        {
          value: 1,
        },
        {
          value: 1,
        },
      ],

      upload_pic_list: [],
      allowUploadNumber: 6,
    };
  },

  watch: {
    upload_pic_list(arr) {
      this.params.uploadedfile1 = this.upload_pic_list.join("|"); //
    },
  },

  onLoad(option) {
    this.orderId = option.orderId;
    this.inventoryId = option.inventoryId;
    this.params.id = this.orderId;
    this.params.inventoryId = this.inventoryId;

    this.setView();
  },
  onShow() {},
  onHide() {},

  onPullDownRefresh() {},
  methods: {
    setView() {
      this.query_order();
    },
    query_order() {
      this.showLoading();
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_detail",
          id: this.orderId,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.products = data.products.filter((v) => v.id == this.inventoryId);
        }
        this.hideLoading();
      });
    },

    toProduct(item) {
      this.toRoute({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },

    changeStar(item, index) {
      console.log(index);
      let value = index + 1;

      let starItems = [];
      for (var i = 1; i <= 5; i++) {
        starItems.push({
          value: value >= i ? 1 : 0,
        });
      }

      // this.starValue = value;
      this.params.star = value;
      this.starItems = starItems;
      this.starTitle = this.starMap[value];
    },

    doSubmit() {
      if (!this.params.content) {
        this.$alert("请填写评价内容");
        return false;
      }

      uni.$u.throttle(this.doSubmitFn, 2000, true);
    },

    doSubmitFn() {
      this.showLoading({
        title: "提交中",
        disClose: 1,
      });
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_comment",
          ...this.params,
        },
      }).then((res) => {
        this.hideLoading(300);
        this.$alert(res);
        if (res.code == 200) {
          this.toBack({
            time: 1500,
          });
        }
      });
    },
    doPreview(pic) {
      uni.previewImage({
        urls: [pic],
      });
    },

    doRemove(item, index) {
      this.upload_pic_list.splice(index, 1);
    },

    doUpload() {
      this.doUploadFn();
      // util.handleUploadImage({
      // 	count: 6,
      // 	successCallback: (res) => {
      // 		// this.upload_image = res.data.path;
      // 		this.upload_pic_list.push(res.data)
      // 	}
      // });
    },

    // 上传图片
    doUploadFn() {
      // #ifdef H5
      this.do_h5_upload();
      // #endif

      // #ifndef H5
      this.do_mp_upload();
      // #endif
    },

    // H5环境上传图片
    do_h5_upload() {
      let count = this.allowUploadNumber - this.upload_pic_list.length;
      uni.chooseImage({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.path,
                if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.upload_pic_list.push(pic);
              }
            });
          });
        },
      });
    },

    // 小程序环境上传图片
    do_mp_upload() {
      let count = this.allowUploadNumber - this.upload_pic_list.length;
      uni.chooseMedia({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表 【{tempFilePath: '临时路径'}】
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.tempFilePath,
                if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.upload_pic_list.push(pic);
              }
            });
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.page-ctx {
  padding: 32rpx;
}

.box-item {
  margin-bottom: 20rpx;
  background: #fff;
  padding: 0 20rpx 0 20rpx;

  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 8rpx 8rpx 8rpx 8rpx;

  .products-title {
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    padding-top: 34rpx;
  }
}

.product-item {
  padding: 26rpx 0 40rpx;

  & + .product-item {
    border-top: 1rpx solid #eee;
  }

  .poster-box {
    width: 176rpx;
    height: 176rpx;
    border-radius: 10rpx;
    overflow: hidden;

    image {
      width: 176rpx;
      height: 176rpx;
    }
  }

  .info {
    flex: 1;
    overflow: hidden;
    padding-left: 24rpx;
    // width: calc(100% - 140rpx);

    .title-box {
    }

    .title {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }

    .desc-box {
      margin-top: 4rpx;

      .desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
    }

    .price-info {
      margin-top: 18rpx;
      .price {
        font-weight: bold;
        font-size: 28rpx;
        color: #e23410;
      }
      .num-box {
        .num {
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }
      }
    }
  }
}

.box-form {
  padding: 20rpx;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 28rpx;
    color: #222222;
  }

  .rate-box {
    margin: 30rpx 0;

    .reviews-star {
      .star-list {
        .star-item {
          margin-right: 10rpx;
          width: 32rpx;
          height: 32rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .star-title {
      margin-left: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
    }
  }

  .textarea-box {
    margin-top: 20rpx;

    textarea {
      overflow: hidden;
      background: #ffffff;
      background: #f8f8f8;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: 1rpx solid #dddddd;

      padding: 30rpx 20rpx;
      display: block;
      width: 100%;
      min-height: 280rpx;

      border-radius: 12rpx 12rpx 12rpx 12rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    .textarea-p {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    /deep/.u-textarea {
      background: #f8f8f8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    /deep/.u-textarea__count {
      background-color: #f6fafd !important;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    .input-placeholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }
  }
}

.upload-wrap {
  margin-top: 30rpx;
}

.upload-list {
  display: flex;
  flex-wrap: wrap;

  .upload-item {
    position: relative;
    width: 202rpx;
    height: 202rpx;
    margin-right: 20rpx;
    margin-bottom: 32rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }

    .remove-box {
      position: absolute;
      z-index: 10;
      top: -10rpx;
      right: -10rpx;

      image {
        width: 42rpx;
        height: 42rpx;
      }
    }

    .preview-box {
      width: 202rpx;
      height: 202rpx;
      background: #fff;

      image {
        width: 202rpx;
        height: 202rpx;
      }
    }

    .upload-box {
      width: 202rpx;
      height: 202rpx;
      background: #fff;
      .up {
        width: 202rpx;
        height: 202rpx;
      }
    }
  }

  .upload-box {
    width: 202rpx;
    height: 202rpx;
    border: 1rpx solid #ddd;

    image {
      width: 202rpx;
      height: 202rpx;
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }

    .tip {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #c8c8c8;
    }
  }
}

.safe-fixed-bottom {
  .btns {
    width: 100%;

    .btn {
      width: 345rpx;
      width: 100%;
      height: 80rpx;
      background: #dddddd;
      border-radius: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-size: 32rpx;
      color: #ffffff;
      // background: linear-gradient(90deg, #5CC1F7 0%, #42C6BF 100%);
      background: #f49c0d;

      &[disabled] {
        background: #dddddd;
      }
    }
  }
}
</style>
